<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
				<el-breadcrumb-item>属性对照{{vue_breadcrumb_info}}</el-breadcrumb-item>
			</el-breadcrumb>
			<!--start 右侧帮助组件    可选！！-->
			<!--<help-components>
				<span slot="headtext">属性对照列表</span>
				<p slot="headDescText">属性对照列表</p>
				<div slot="helpContentWrap">
				</div>
			</help-components>-->
			<!--end 右侧帮助组件-->
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap companyWrap" ref="companyWrap">
			<el-form :model="SystemCpropData" :rules="rules" ref="dataForm" label-width="100px" class="formFontSizeMini scroll">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="场景类别">
							<el-select class="selectWidth" v-model="SystemCpropData.cpropType" :placeholder="placeholder.cpropType">
								<el-option v-for="(item,index) in cpropTypeList" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="对照属性" prop="cpropPropName">
							<el-input v-model="SystemCpropData.cpropPropName" :placeholder="placeholder.cpropPropName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="输出中文列" prop="cpropDefaultHead">
							<el-input v-model="SystemCpropData.cpropDefaultHead" :placeholder="placeholder.cpropDefaultHead"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="输入中文列(集合)" prop="cpropHeadNames">
							<el-input type="textarea" v-model="SystemCpropData.cpropHeadNames" :placeholder="placeholder.cpropHeadNames"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox" :class="{btnBox1:!$store.state.headFold}">
			<el-button type="primary" @click="save_systemCpropData">保存</el-button>
			<el-button @click="cancelFn">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			return {
				vue_breadcrumb_info:"新增",   //面包屑显示
				fontColor: "#03B8CC",
				ddtypeCode: "00100000019",
				cpropTypeList:[],
				SystemCpropData: {
					cpropType: "",
					cpropPropName: "",
					cpropDefaultHead: "",
					cpropHeadNames: ""
				},
				placeholder: {
					cpropType: "请选择场景类别",
					cpropPropName: "请输入对照属性",
					cpropDefaultHead: "请输入输出中文列",
					cpropHeadNames: "请输入输入中文列(集合)"
				},
				rules: {
					cpropPropName: [{
						required: true,
						message: '对照属性不能为空',
						trigger: 'blur'
					}],
					cpropDefaultHead: [{
						required: true,
						message: '输出中文列不能为空',
						trigger: 'blur'
					}],
					cpropHeadNames: [{
						required: true,
						message: '输入中文列(集合)不能为空',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			//查询所有场景类别
			query_cpropTypeListAll(ddtypeCode){
				this.axios({
					method: 'post',
					url: "/v3/system/ddlists/"+ddtypeCode+"/listAll",
					data:{

					}
				}).then((res) => {
					this.cpropTypeList = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
			query_systemCpropData(){  //请求数据Data
				this.axios({
					method:"GET",
					url:"/v3/system/cprops/"+localStorage.getItem("cpropCode")
				}).then((res)=>{
					this.SystemCpropData=res.data;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			save_systemCpropData(){
				this.$refs.dataForm.validate((valid) => {
					if(valid) {
						if(localStorage.getItem("cpropCode") == 'null'){
							this.axios({
								method:"POST",
								url:"/v3/system/cprops",
								data:{
									"cpropType":this.SystemCpropData.cpropType,
									"cpropPropName":this.SystemCpropData.cpropPropName,
									"cpropDefaultHead":this.SystemCpropData.cpropDefaultHead,
									"cpropHeadNames":this.SystemCpropData.cpropHeadNames,
								}
							}).then((res)=>{
								this.Public.openSuccess(this,"操作成功！");
								this.$router.push({path:'/system/systemCpropList'})
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							})
							localStorage.setItem("cpropCode",null);
						}else{
							this.axios({
								method:"PUT",
								url:"/v3/system/cprops/"+localStorage.getItem("cpropCode"),
								data:{
									"cpropType":this.SystemCpropData.cpropType,
									"cpropPropName":this.SystemCpropData.cpropPropName,
									"cpropDefaultHead":this.SystemCpropData.cpropDefaultHead,
									"cpropHeadNames":this.SystemCpropData.cpropHeadNames,
								}
							}).then((res)=>{
								this.Public.openSuccess(this,"操作成功！");
								this.$router.push({path:'/system/systemCpropList'})
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							})
							localStorage.setItem("cpropCode",null);
						}
					} else {
						return false;
					}
				});
			},
			cancelFn() {
				this.$router.push({path:'/system/systemCpropList'});
				localStorage.setItem("cpropCode",null);
			}
		},
		created() {
			if(localStorage.getItem("cpropCode") != 'null'){
				this.query_systemCpropData();
				this.vue_breadcrumb_info="修改";
			}
			this.query_cpropTypeListAll(this.ddtypeCode);
		},
		mounted() {
			this.$refs.companyWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
			document.querySelector(".companyWrap form").style.height = (document.documentElement.clientHeight - 180) + 'px';
		}
	}
</script>

<style>
	*{
		transition:.2s;
	}
	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
    padding: 3px 0 15px 0;
	}

	div.wrap {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.scroll {
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
	}

	.title {
		height: 50px;
		color: #03B8CC;
		font-size: 16px;
	}

	.selectWidth {
		width: 100%;
	}

	.btnBox {
		position: absolute;
		bottom: 10px;
		left:180px;
		height: 50px;
		background: #fff;
		z-index: 100;
	}
	.btnBox1 {
		left:98px;
	}
	/* start upload */
	.avatar-uploader {
	    position: relative;
		border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    overflow: hidden;
	    z-index: 9;
	}
	.avatar-uploader:hover {
		border-color: #03B8CC;
	}
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 95px;
		height: 95px;
		line-height: 95px;
		text-align: center;
	}
	.avatar-uploader .g-core-image-upload-form {
	    width: 100% !important;
	    height: 100% !important;
	    cursor: pointer;
	}
	.avatar-uploader .g-core-image-upload-form>input {
	    position: relative;
	    top: -4px;
	    cursor: pointer;
	}
	.crop-box .g-resize {
		background-color: red !important;
	}
	/* end upload */
</style>
